<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <div class="container">
            <h4 style="margin-bottom: 20px">{{manufacture.breedName}}</h4>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="批次：">
                        {{manufacture.batch}}
                    </el-form-item>
                    <el-form-item label="入库类型：">
                        {{manufacture.type}}入库
                    </el-form-item>
                    <el-form-item label="状态：">
                        {{manufacture.isCheck == 0?'未检测':'已检测'}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入库时间：">
                        {{manufacture.time}}
                    </el-form-item>
                    <el-form-item label="数量：">
                        {{manufacture.totalNum}}{{manufacture.units}}
                    </el-form-item>
                    <el-form-item label="上次报告日期：">
                        {{ruleForm.time}}
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <div>
            <div class="container" style="margin-top:20px">
                <h3 style="margin-bottom: 20px">检测明细</h3>
                <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="createTime" sortable label="报告日期"></el-table-column>
                    <el-table-column prop="organization" sortable label="检测机构"></el-table-column>
                    <el-table-column prop="address" sortable label="省份"></el-table-column>
                    <el-table-column prop="userName" sortable label="检测负责人"></el-table-column>
                    <el-table-column prop="standard" sortable label="检测依据" width="300">
<!--                        <template slot-scope="scope">-->
<!--                            {{scope}}-->
<!--                          <el-popover-->
<!--                            placement="top-start"-->
<!--                            width="200"-->
<!--                            trigger="hover"-->
<!--                            :content="scope.row.ss">-->
<!--                            <el-button slot="reference">{{scope.row.standard[0]}}等</el-button>-->
<!--                          </el-popover>-->
<!--						 </template>-->
                    </el-table-column>
                    <el-table-column prop="detectionResult" sortable label="检测结果">
                        <template slot-scope="scope">
                            {{scope.row.detectionResult == "1"?'合格':'未合格'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="检测报告" width="150" align="center">
                        <template slot-scope="scope">
                           <!-- <el-button
                                type="text"
								v-if="scope.row.detectionUrl != ''"
                                @click="handleView(scope.$index, scope.row)"
                            >查看</el-button> -->
                            <el-button
                                 type="text"
                            	v-if="scope.row.file || !(storname == '配方颗粒' && standard == '省标' && scope.row.detectionUrl)"
                                 @click="handleDown(scope.$index, scope.row)"
                             >下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize5" @current-change="handleCurrentChange5" :total="total5" :current-page.sync="currentPage5" style="margin-top:20px"></el-pagination> -->
            </div>

            <el-form-item class="footerFixed">

                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </div>
        </el-form>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
		<!-- <PDF ref="pdf" v-if="ifshow"></PDF> -->
		<!-- <pdf src="./过路费.pdf" v-if="ifshow"></pdf> -->
    </div>
</template>

<script>
	// import PDF from "./yl"
	// import pdf from 'vue-pdf'
import BigImg from '../../../common/BigImg.vue';
import {detection_findByRelevanceId,detection_down} from "@/request/api";
    export default {
        components: {
            BigImg,
			// pdf
        },
        data() {

            return {
				pdfurl:"",
				ifsho:false,
                tableData:[],
                imgSrc: '',
                showImg:false,
                showForm: 1,
                manufacture:{},
                ruleForm: {
                    organization: '',
                    userId: '',
                    userName: '',
                    standardId: '',
                    standard: '',
                    detectionResult: '',
                    time: '',
                    detectionUrl: '',
                    oldDetectionUrl: '',
                },
                rules: {
                    organization: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                    ],
                    detectionResult: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    userName: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                    ]
                },
                listUrl: '',
                checkList: [],
                sceneUrls: [],
                urlShow: false,
                materialTypeStor: '',
                standard:'',
                storname:'',
            };
        },
        mounted(){
            var ruleForm = this.$store.state.newStorge
            this.id = this.$route.query.id
            this.isCheck = this.$route.query.isCheck
            this.type = this.$route.query.type
            this.storname = this.$route.query.storname
            this.standard = this.$route.query.standard
            if(this.storname == '中药材'){
                this.materialTypeStor = '中药材'
            } else if(this.storname == '辅料'){
                this.materialTypeStor = '辅料'
            } else if(this.storname == '提取饮片'){
                this.materialTypeStor = '提取饮片'
            } else if(this.storname == '配方颗粒'){
                this.materialTypeStor = '配方颗粒'
            }else if(this.storname == '配方颗粒(颗粒)'){
                this.materialTypeStor = '配方颗粒(颗粒)'
            }else if(this.storname == '配方颗粒(浸膏粉)'){
                this.materialTypeStor = '配方颗粒(浸膏粉)'
            }else if(this.storname == '中药饮片(半成品)'){
                this.materialTypeStor = '中药饮片(半成品)'
            }else if(this.storname == '中药饮片'){
                this.materialTypeStor = '中药饮片'
            }
            if (this.isCheck == '0') {
                this.init()
            } else {
                this.init1()
            }
            if (ruleForm != null) {
                if (ruleForm.detectionResult == '1') {
                    this.ruleForm = this.$store.state.newStorge
                } else if (ruleForm.detectionResult == '2'){
                    this.ruleForm = this.$store.state.newStorge
                }
            }
        },
        methods: {
			handleDown(index,row){
                console.log(row);
                if(row.file && this.storname=='配方颗粒' && this.standard =="省标"){
                    let temp  = row.file.split(';')
                    console.log(temp);
                    temp.forEach(item=>{
                        window.open(`http://${window.location.host}/file/show/${item}`)
                    })
                }else if(row.detectionUrl){
                    window.location.href = "http://" + window.location.host + "/file/show/" + row.detectionUrl;
                }else if(row.filename){
                    window.location.href = "http://" + window.location.host + "/detection/download/" + row.filename;
                }else{
                    this.$message.error('没有文件')
                }
				// window.location.href = "http://" + window.location.host + "/detection/download/" + row.filename;
                // window.location.href = "http://" + window.location.host + "/file/show/" + row.file;

				// window.location.href  =" http://39.96.59.234:8901/detection/download/" + row.id
				// console.log(window.location.href)
				// detection_down(row.relevanceId).then((res)=>{

				// })
			},
            handleView(index,row){
					var name = row.detectionUrl
				  var  pos = name.lastIndexOf('.');//'/所在的最后位置'
				  var  str = name.substr(pos)//截取文件名称字符串
				  var  url = name.substr(0,pos)//截取路径字符串

				  if(str == ".jpg"){

					  this.$router.push({
						  path:'/detection/photo',
						  query:{img:row.detectionUrl}
					  })
				  }else if(str == ".png"){
					  this.$router.push({
						  path:'/detection/photo',
						  query:{img:row.detectionUrl}
					  })
					  // this.ifshow = true
					  // this.pdfurl =
					  // this.$refs.pdf.previewPDF(this.$store.state.uploadImgurl + row.detectionUrl)
				  }else if(str = ".pdf"){

				  }
            },
            backPage () {
                this.$router.go(-1);
                this.$store.commit('setStorName',this.materialTypeStor)
            },
            handlecheck(row){
                this.showImg = true;
　　　　　　    // 获取当前图片地址
　　　　　　    this.imgSrc = this.$store.state.imageUrls + row;

            },
            viewImg(){
                this.showImg = false;
            },
            init() {
                // 生产findbyid
                detection_findByRelevanceId({
                    id: this.id,
                    type: this.type
                }).then((res)=>{
                    this.manufacture = res.data.headMsg
                })
            },
            init1() {
                // 生产findbyid
                detection_findByRelevanceId({
                    id: this.id,
                    type: this.type
                }).then((res)=>{
                    this.manufacture = res.data.headMsg
                    this.ruleForm = res.data.detection
                    this.tableData = res.data.detectionDetaileds
                    console.log(this.tableData);
						// this.tableData[s] = ""
					for(var s=0;s<this.tableData.length;s++){
                        if(this.tableData[s].standard){
                            this.tableData[s].standard = this.tableData[s].standard.split(",")

                            var arr = this.tableData[s].standard
                            this.tableData[s].ss = ""
                            for(var r=0;r<arr.length;r++){

                                this.tableData[s].ss += arr[r] +";"

                            }
                        }else{
                            break
                        }

					}

                    if(this.ruleForm.detectionResult == 1){
                        this.ruleForm.detectionResult = "合格"
                    }else{
                        this.ruleForm.detectionResult = "不合格"
                    }
                    this.sceneUrls = this.ruleForm.detectionUrl.split(",")

                    for (let i = 0; i < this.sceneUrls.length; i++) {
                        const t = this.sceneUrls[i];
                        var type = t.substring(t.length-4)

                        if (type == '.pdf') {
                            this.urlShow = true
                        }
                    }

                })
            },
        }
    }
</script>
<style scoped lang="less">

.el-date-editor.el-input{
    width: 200px !important
}
.el-select{
    width: 200px !important
}
</style>
